import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import {Login} from './Auth'
import {Tweet} from './Tweet'
import AdminContainer from './Admin/AdminContainer'

import {ChatContainer} from './Chat'

import {TodoApp} from './Todo'

function Launcher() {

  return (
    <Router>

      <div>

        <Route exact path="/" component={Tweet} />
        <Route path="/tweet" component={Tweet} />
        <Route path="/login" component={Login} />
        <Route path="/home" component={Home} />
        <Route path="/chat" component={ChatContainer} />
        <Route path="/todo" component={TodoApp} />
        
        <Route path="/admin" component={AdminContainer} />

      </div>
    </Router>
  )
};

const Home = ({match}) => (
  <div>
    <Link to="/">Home</Link>
    
    <ul>
      <li>
        <Link to={`${match.url}/about`}> about </Link>
      </li>
      <li>
        <Link to={`${match.url}/topics`}> topics </Link>
      </li>
    </ul>
    <h2>Home</h2>

    <Route path={`${match.url}/about`} component={About} />
    <Route path={`${match.url}/topics`} component={Topics} />

  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>Rendering with React</Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>Components</Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic} />
    <Route
      exact
      path={match.url}
      render={() => <h3>Please select a topic.</h3>}
    />
  </div>
);

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
);


export default Launcher
